<template>
  <div id="app">
    <table class="tb">
    <caption>欢迎光临_vue开发的收银系统_水果店</caption>
      <tr>
        <th>苹果10$/斤,折扣 &lt; 8折 > </th>
      </tr>
      <tr>
        <td>请输入你要购买的斤数
          <!-- 获取输入的斤数 -->
        <input type="number" name="" id="" v-model="count"></td>
      </tr>
      <tr>
        <!-- 将获取的斤数为参数,计算价格 -->
        <td><button @click="pay(count)">结账买单~</button></td>
      </tr>
      <tr>
        <!-- 把计算的价格在渲染进页面 -->
        <td>结账单:总价:{{price}}$元 折后价:{{discount}}$元,省了:{{save}}$元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return{
      count:"",
      price:0,
      discount:0,
      save:0
    }
  },
  methods:{
    pay(count){
      // console.log(count)
      this.price = (count * 10).toFixed(2)
      this.discount = (count * 10 * 0.8).toFixed(2)
      this.save = this.price - this.discount
    }
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>